﻿<hr />
<div class="alert alert-info alert-dismissable">
    <a class="panel-close close" data-dismiss="alert">×</a>
    <i class="fa fa-user-plus fa-3x"></i>
<!--    Register <strong>{{movie.Title}}</strong> new customer. Make sure you fill all required fields.-->
    Register new customer. Make sure you fill all required fields.
</div>
<div class="row">
    <form role="form"  name="addCustomerForm" (ngSubmit)="Register(addCustomerForm.value)">
        <div class="col-sm-6">
            <div class="form-group" [ngClass]="{'has-error':!addCustomerForm.controls['firstName'].valid && addCustomerForm.controls['firstName'].touched}">
                <label for="firstName">First Name</label>
                <input type="text" class="form-control" [formControl]="addCustomerForm.controls['firstName']"  placeholder="First Name">
                <div *ngIf="addCustomerForm.controls['firstName'].hasError('required') && addCustomerForm.controls['firstName'].touched" class="alert alert-danger">First Name is required.</div>
            </div>
            <div class="form-group" [ngClass]="{'has-error':!addCustomerForm.controls['lastName'].valid && addCustomerForm.controls['lastName'].touched}">
                <label for="lastName">Last Name</label>
                <input type="text" class="form-control" [formControl]="addCustomerForm.controls['lastName']" placeholder="Last Name">
                <div *ngIf="addCustomerForm.controls['lastName'].hasError('required') && addCustomerForm.controls['lastName'].touched" class="alert alert-danger">Last Name is required.</div>
            </div>
            <div class="form-group" [ngClass]="{'has-error':!addCustomerForm.controls['email'].valid && addCustomerForm.controls['email'].touched}">
                <label for="email">Email address</label>
                <input type="email" class="form-control" [formControl]="addCustomerForm.controls['email']" placeholder="Email address">
                <div *ngIf="addCustomerForm.controls['email'].hasError('required') && addCustomerForm.controls['email'].touched" class="alert alert-danger">Email is required.</div>
            </div>
            <div class="form-group" [ngClass]="{'has-error':!addCustomerForm.controls['identityCard'].valid && addCustomerForm.controls['identityCard'].touched}">
                <label for="identityCard">Identity Card</label>
                <input type="text" class="form-control" [formControl]="addCustomerForm.controls['identityCard']" placeholder="Identity Card number">
                <div *ngIf="addCustomerForm.controls['identityCard'].hasError('required') && addCustomerForm.controls['identityCard'].touched" class="alert alert-danger">Identity Card is required.</div>
            </div>
            <div class="form-group" [ngClass]="{'has-error':!addCustomerForm.controls['dateOfBirth'].valid && addCustomerForm.controls['dateOfBirth'].touched}">
                <label for="dateOfBirth">Date of Birth</label>
                    <input type="date" class="form-control" [formControl]="addCustomerForm.controls['dateOfBirth']" />
                    <div *ngIf="addCustomerForm.controls['dateOfBirth'].hasError('required') && addCustomerForm.controls['dateOfBirth'].touched" class="alert alert-danger">Date of birth  is required.</div>
            </div>
            <div class="form-group" [ngClass]="{'has-error':!addCustomerForm.controls['mobile'].valid && addCustomerForm.controls['mobile'].touched}">
                <label for="mobilePhone">Mobile phone</label>
                <input type="text" class="form-control" [formControl]="addCustomerForm.controls['mobile']" placeholder="Mobile phone">
                <div *ngIf="addCustomerForm.controls['mobile'].hasError('required') && addCustomerForm.controls['mobile'].touched" class="alert alert-danger">Mobile phone is required.</div>
            </div>
            <input type="submit" name="submit" id="submit" value="Submit" [disabled]="!addCustomerForm.valid" class="btn btn-info pull-right">
        </div>
    </form>
    <div class="col-sm-5 col-md-push-1">
        <div class="col-md-12">
            <div class="alert alert-success">
                <ul>
                    <li *ngFor="let message of submission.successMessages">
                        <strong>{{message}}</strong>
                    </li>
                </ul>
                <!--<strong ng-bind="submission.successMessage"><span class="glyphicon glyphicon-ok"></span> </strong>-->
            </div>
            <div class="alert alert-danger">
                <ul>
                    <li *ngFor="let error of submission.errorMessages ">
                        <strong>{{error}}</strong>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<button (click)="test()">test</button>